<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ name }}
        <div>   <!-- 输入框 -->
        <label for="user">请输入</label>
        <input type="text" name="" id="user" v-model="user" />
        <p>更新:{{ user }}</p>
      </div>

      <div> <!-- 单选按钮 -->
		  <!-- for id相同   name v-model 相同 -->
        <label for="man">男</label>
        <input type="radio" name="sex" id="man" value="man" v-model="sex" />
        <label for="woman">女</label>
        <input type="radio" name="sex" ia="woman" value="woman" v-model="sex" /><p>您选择了{{sex}}</p>
      </div>

	  <div>  <!-- 复选框 -->
		<input type="checkbox" name="" id="" value="" v-model="isCheckbox" >
	  </div>

	  <div> <!-- 多个复选框 -->
	  	<label for="jack">jack</label>
		<input type="checkbox" name="" id="jack" value="jack" v-model="par"/>
		<label for="tom">tom</label>
		<input type="checkbox" name="" id="tom" value="tom" v-model="par"/>
		<label for="peter">peter</label>
		<input type="checkbox" name="" id="peter" value="peter" v-model="par"/>
		<p>您选择了：{{par}}</p>
	  </div>
	  
	  <div><!-- 下拉选择框的v-model要绑定在select上 -->
			<select name="" id="" multiple v-model="ele">
				<option value="请选择" disabled>请选择</option>
				<option value="游泳">1</option>
				<option value="甜甜圈">2</option>
				<option value="呼啦圈">3</option>
			</select>
		<p>您选择了:{{ele}}</p>	
	  </div>

	  <div> <!-- 文本域 -->
		<textarea name="" id="" cols="30" rows="10" v-model="text"></textarea>
		<p>输入的内容：{{text}}</p>
	  </div>
    </div>
    <script src="vue.js"></script>
    <script>
      /*
		v-model:给表单元素绑定
		*/
      let vm = new Vue({
        el: '#app',
        data: {
          name: 'hello',
          user: '',
		  sex:"man",
		  isCheckbox:true,
		  par:[],
		  ele:'',
		  text:''
        },
        methods: {}
      });
    </script>
  </body>
</html>
